<template>
	<view class="content">
		<view class="search">
			<u-search shape="square" style="width: 700rpx;" placeholder="输入姓名/手机号/身份证号/微信号" height="80" @custom="getData" v-model="keyword" @search="getData"></u-search>
		</view>
		<view class="title">查询结果 * {{dataList.length}}</view>
		<view class="dataList">
			<view class="dataList-item">曝光类型</view>
			<view class="dataList-item">地区</view>
			<view class="dataList-item">联系信息</view>
			<view class="dataList-item">日期</view>
			<view class="dataList-item2"></view>
		</view>
		<scroll-view scroll-y="true" class="table" @scrolltolower="PullUpLoading">
			<view class="table-item" v-for="(item,index) in dataList" :key="index" @click="goDeatils(item.id)">
				<view class="table-item-nik">{{item.type!==1?item.type==2?'恶意领养':'欺诈骗钱':'恶意送养'}}</view>
				<view class="table-item-nik">{{item.city}}</view>
				<view class="table-item-nik">{{item.phone}}</view>
				<view class="table-item-nik">{{(item.createdAt).slice(0,10)}}</view>
				<view class="table-item-nik2"><u-icon name="arrow-right" style="margin-left: -25rpx;" color="#a3a3a3" size="30"></u-icon></view>
			</view>
			<view v-if="onShow" style="width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: center;color: #bcbcbc;">
				到底了，没有更多了~
			</view>
			<view v-if="dataList.length === 0" class="empty"><u-empty mode="data"></u-empty></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			onShow:false,
			page: 1,
			size: 11,
			total: 0,
			dataList: [],
			keyword:undefined
		}
	},
	onPullDownRefresh() {
		this.onShow = false
		this.page = 1
		this.getData()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods:{
		goDeatils(e){
			uni.navigateTo({
				url: '../addExposure/ExposureInformation?id='+e
			})
		},
		getData(){
			let self = this 
			if(self.keyword){
				self.$request(self.commonApi.adoptExposure+self.page+'/'+self.size,'GET',{keyword:self.keyword},'application/json').then(res=>{
					let data = res.data.data.result
					self.total = res.data.data.meta.total
					self.dataList = data
				})
			}else{
				self.$request(self.commonApi.adoptExposure+self.page+'/'+self.size,'GET').then(res=>{
					let data = res.data.data.result
					self.total = res.data.data.meta.total
					self.dataList = data
				})
			}
		},
		setUrl(e){
			uni.navigateTo({
				url: e
			})
		},
		PullUpLoading(){
			if(this.dataList.length < this.total){
				this.page += 1
				let self = this
				self.$request(self.commonApi.adoptExposure+self.page+'/'+self.size,'GET').then(res=>{
					let data = res.data.data.result
					data.forEach(item=>{
						self.dataList.push(item)
					})
					self.onShow = false
				})
			}else{
				this.onShow = true
			}
		}
	},
	mounted() {
		this.getData()
	}
};
</script>

<style lang="scss" scoped>
	.empty {
		height: 500rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.search{
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
	}
	.table-item-nik{
		width: 24%;
		padding: 20rpx;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		text-align: center;
		font-size: 24rpx;
		color: #434343;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	.table-item-nik2{
		width: 4%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// position: absolute;
		// right: 10rpx;
	}
	.table-item{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		background: white;
		border-bottom: 1px solid #f2f2f2;
		position: relative;
	}
	.dataList-item2{
		width: 4%;
		height: 100rpx;
	}
	.dataList-item{
		width: 24%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
	}
	.table{
		width: 100%;
		height: calc(100vh - 385rpx);
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: white;
	}
	.dataList{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		background: white;
		border-bottom: 1px solid #f2f2f2;
	}
	.title{
		width: 100%;
		padding: 20rpx;
		font-size: 28rpx;
		color: #8C8C8C;
	}
.content {
	width: 100%;
	height: 100vh;
	background: #f2f2f2;
	display: flex;
	flex-direction: column;
}
</style>
